<template>
  <el-row :gutter="20">
    <!-- 左侧路径树 -->
    <el-col :span="5" :xs="24">
      <ContentWrap class="h-1/1">
        <el-tree style="max-width: 600px" :data="treeList" :props="defaultProps" @node-click="handleNodeClick"
          highlight-current default-expand-all />
      </ContentWrap>
    </el-col>
    <el-col :span="19" :xs="24">
      <ContentWrap>
        <code-diff :old-string="oldData" :new-string="newData" file-name="test.txt" output-format="side-by-side"
          :context="20" :isShowNoChange="true" />
      </ContentWrap>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import { CodeDiff } from 'v-code-diff'
import * as CiApi from '@/api/system/ci'
import { resolve } from 'path';
import { reject } from 'lodash-es';
defineOptions({ name: 'CrStatus' })

const route = useRoute() // 路由
const param = JSON.parse(route.query.params)
const treeList = ref() // 树形结构
const oldData = ref('')
const newData = ref('')

const defaultProps = {
  children: 'children',
  label: 'path',
}

const getTreeList = async () => {
  const data = await CiApi.getTree(param)
  treeList.value = data
}

const handleNodeClick = async (row) => {
  let params = { ...param, ...row }
  const data = await CiApi.getFileContent(params)
  oldData.value = data.oldCode
  newData.value = data.newCode
}

onMounted(async () => {
  getTreeList()
})
</script>
